// 输入框样式配置
// 确保所有输入框的字体大小与输入框高度一致

export const inputStyles = {
	// 基础输入框样式
	base: {
		backgroundColor: '#fff',
		color: '#333',
		webkitUserSelect: 'text',
		userSelect: 'text',
		webkitAppearance: 'none',
		appearance: 'none',
		caretColor: '#667eea',
		zIndex: '1',
		position: 'relative',
		lineHeight: '1.4',
		verticalAlign: 'middle',
		height: 'auto',
		minHeight: '68rpx',
		webkitTouchCallout: 'default',
		webkitTapHighlightColor: 'transparent'
	},
	
	// 普通输入框样式
	input: {
		fontSize: '28rpx',
		padding: '20rpx',
		border: '2rpx solid #f0f0f0',
		borderRadius: '12rpx',
		boxSizing: 'border-box'
	},
	
	// 小尺寸输入框样式（用于项目中的子输入框）
	smallInput: {
		fontSize: '26rpx',
		padding: '16rpx',
		border: '2rpx solid #f0f0f0',
		borderRadius: '8rpx',
		boxSizing: 'border-box',
		minHeight: '58rpx'
	},
	
	// 大尺寸输入框样式（用于登录页）
	largeInput: {
		fontSize: '32rpx',
		padding: '20rpx',
		border: 'none',
		borderRadius: '0',
		boxSizing: 'border-box'
	},
	
	// 多行文本输入框样式
	textarea: {
		fontSize: '28rpx',
		padding: '20rpx',
		border: '2rpx solid #f0f0f0',
		borderRadius: '12rpx',
		boxSizing: 'border-box',
		minHeight: '120rpx',
		verticalAlign: 'top',
		resize: 'none'
	},
	
	// 应用样式到元素
	applyStyles(element, styleType = 'input') {
		if (!element) return
		
		// 应用基础样式
		Object.keys(this.base).forEach(key => {
			element.style[key] = this.base[key]
		})
		
		// 应用特定类型样式
		const typeStyles = this[styleType] || this.input
		Object.keys(typeStyles).forEach(key => {
			element.style[key] = typeStyles[key]
		})
	},
	
	// 批量应用样式
	applyToAll(selector = 'input, textarea') {
		// #ifdef H5
		const elements = document.querySelectorAll(selector)
		elements.forEach(element => {
			if (element.tagName === 'TEXTAREA') {
				this.applyStyles(element, 'textarea')
			} else if (element.classList.contains('small-input') || element.classList.contains('item-input')) {
				this.applyStyles(element, 'smallInput')
			} else if (element.classList.contains('large-input') || element.classList.contains('input-field')) {
				this.applyStyles(element, 'largeInput')
			} else {
				this.applyStyles(element, 'input')
			}
		})
		// #endif
	}
}

export default inputStyles
